<!DOCTYPE html>
<html>
<head>
    <title>Mass-Spring System</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Clear canvas
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // --- Drawing parameters ---
        const centerX = 250;
        const surfaceY = 60;
        const surfaceWidth = 200;
        const springStartY = surfaceY;
        const springAttachY = 80;
        const springEndY = 220;
        const springRadius = 25;
        const numCoils = 11; // Number of semi-circle loops
        
        const massWidth = 80;
        const massHeight = 50;
        const springToMassGap = 20;
        const massY = springEndY + springToMassGap;
        const massX = centerX - massWidth / 2;

        // --- Draw Fixed Surface ---
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(centerX - surfaceWidth / 2, surfaceY);
        ctx.lineTo(centerX + surfaceWidth / 2, surfaceY);
        ctx.stroke();

        // Draw hatching for the surface
        ctx.lineWidth = 1.5;
        const hatchLength = 15;
        const hatchSpacing = 15;
        for (let i = centerX - surfaceWidth / 2; i <= centerX + surfaceWidth / 2 - hatchLength / Math.sqrt(2); i += hatchSpacing) {
            ctx.beginPath();
            ctx.moveTo(i, surfaceY);
            ctx.lineTo(i + hatchLength, surfaceY - hatchLength);
            ctx.stroke();
        }

        // --- Draw Spring ---
        ctx.lineWidth = 2;
        
        // Top straight part of the spring
        ctx.beginPath();
        ctx.moveTo(centerX, springStartY);
        ctx.lineTo(centerX, springAttachY);
        ctx.stroke();
        
        // Coiled part of the spring (series of connected semi-circles)
        const coilStepY = (springEndY - springAttachY) / numCoils;
        let currentY = springAttachY;

        ctx.beginPath();
        ctx.moveTo(centerX, currentY);
        for (let i = 0; i < numCoils; i++) {
            const isRightSide = (i % 2 === 0);
            ctx.arc(centerX, currentY + coilStepY / 2, springRadius, -Math.PI / 2, Math.PI / 2, !isRightSide);
            currentY += coilStepY;
        }
        
        // Bottom straight part of the spring
        ctx.lineTo(centerX, massY);
        ctx.stroke();

        // --- Draw Mass ---
        ctx.lineWidth = 2;
        ctx.strokeRect(massX, massY, massWidth, massHeight);

        // --- Draw Labels ---
        ctx.fillStyle = 'black';
        ctx.font = '24px sans-serif';

        // Label "spring"
        const springLabelX = 100;
        const springLabelY = 160;
        const springTargetY = 150;
        ctx.fillText('spring', springLabelX, springLabelY);
        ctx.beginPath();
        ctx.moveTo(springLabelX + ctx.measureText('spring').width + 5, springLabelY - 8);
        ctx.lineTo(centerX - springRadius - 3, springTargetY);
        ctx.stroke();
        
        // Label "mass"
        const massLabelX = 360;
        const massLabelY = 265;
        ctx.fillText('mass', massLabelX, massLabelY);
        ctx.beginPath();
        ctx.moveTo(massLabelX - 5, massLabelY - 8);
        ctx.lineTo(massX + massWidth + 3, massY + massHeight / 2);
        ctx.stroke();

        // Figure caption
        ctx.font = 'bold 24px sans-serif';
        const caption = 'Fig. 4.1';
        const captionWidth = ctx.measureText(caption).width;
        ctx.fillText(caption, (canvas.width - captionWidth) / 2, 400);

    </script>
</body>
</html>